<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的有声相册</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 50;
            padding: 50;
            background-image: url(./复古cd机.png)
            }
        </style>
</head>
<body>
    <!-- 头部 注释 ctrl+/ -->
<div>
<h1>我的有声相册</h1>
<a href="#美女">美女</a>
<a href="#科学家">科学家</a>
<a href="#二刺螈">二刺螈</a>
<a href="#帅哥">帅哥</a>
<hr>
   </div>


 <!-- 主体 -->
<div>
<div>
  <h2 id="美女">美女</h2>
  <a href="./详情页.html">
  <img src="./美女1.jpg" alt="dasha"height="282px"></a>
  <a href="./详情页.html">
  <img src="./美女2.jpg"height="200px"></a>
  <a href="./详情页.html">
  <img src="./美女3.jpg"height="250px"></a>

<div>
 <h2 id="科学家">科学家</h2>
 <img src="科学家1.jpg"height="200px">
 <img src="./科学家2.jpg"height="200px">
 <img src="./科学家3.jpg"height="200px">
</div>
 <div>
    <h2 id="二刺螈">二刺螈</h2>
    <img src="./二次元.jpg"height="200px">
   <img src="./二次元2.jpg"height="200px">
</div>
<div>
    <h2 id="帅哥">帅哥</h2>
    <img src="帅哥1.jpg"height="300px">
    <img src="./帅哥2.jpg"height="200px">
    <img src="./帅哥3.jpg"height="200px">
</div>


   </div>
 <!-- 尾部 -->
   <div>
 <p>&copy;版权所有-LSX</p>
</div>
</body>
</html>